<template>
  <div>
    <h3>hahaha</h3>
    <p>{{detail}}</p>
  </div>

</template>

<script>
    export default {
        name: 'Player',
        props: {},
        components: {},
        data() {
            return {
              detail:{}
            }
        },
        computed: {
            name() {
                return this.data
            }
        },
        watch: {
            data(newValue, oldValue) {

            }
        },
        mounted(){
          //获得路由的uid
          //$route.params路由对象
            this.detail=this.getPlayer(this.$route.params.uid);//获得uid
        },
        methods: {
            getPlayer:function (uid) {//uid是index.js里的后缀
              //根据来的id，判断显示不同用户信息
              switch (uid) {
                case '1':
                  return {uid:1,name:"Player_First",content:"哈哈哈好开心"};
                case '2':
                  return {uid:2,name:"Player_Second",content:"好气哦我是第二名"};
                case '3':
                  return {uid:3,name:"Player_Third",content:"真好我是第三"};
              }
            }
        },
        beforeRouteUpdate(to,from,next){//响应路由参数变换
           console.log(to);
          this.detail=this.getPlayer(to.params.uid);//to当前路由对象

          next();//循环往下走
        },
        filters: {
            fnName: function (value) {
                return value
            }
        }
    }
</script>

<style scoped>

</style>
